<template>
	<view class="wpprs">
		<view class="adrssbox">
			<view class="title">定位</view>
			<view class="iptbox">
				<image src="../../static/images/iconAddr.png"></image>
				{{ address }}
			</view>
			<view><image src="../../static/images/iconRefesh.png" @click="getAddress"></image></view>
		</view>
		<view class="submit" @click="phoneReport">确定</view>
	</view>
</template>

<script>
import QQMapWX from '../../utlis/qqmap-wx-jssdk.min.js';
import { workOrdersignIn } from '../../api/order';
export default {
	name: 'punchTheClock',
	data() {
		return {
			address: '',
			roderId: '',
			latitude: '',
			longitude: ''
		};
	},
	onLoad(e) {
		this.roderId = e.id;
		this.getAddress();
	},
	methods: {
		getAddress() {
			let _this = this;
			uni.getLocation({
				type: 'wgs84',
				altitude: true,
				success(res) {
					console.log(res);
					let qqmapsdk = new QQMapWX({
						key: '26CBZ-5X56U-D4DVT-B4KVL-6T4B5-LTBGW'
					});
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						sig: 'w276kzqX9w5s73q9DiUY2sZLVAuPev',
						success(re) {
							console.log(re.result.address); //这里边就是你需要的定位数据了
							_this.address = re.result.address;
						},
						fail(re) {
							console.log(re, '失败信息');
						}
					});
				}
			});
		},
		phoneReport() {
			//提交打卡
			workOrdersignIn({
				roderId: this.roderId,
				location: `${this.address}`
			}).then((data) => {
				uni.navigateBack({ delta: 1 });
			});
		}
	}
};
</script>

<style scoped lang="less">
.wpprs {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-image: url('https://junminyiqi.oss-cn-shanghai.aliyuncs.com/flies/d29eccf2-f7be-dbc8-4853-e3b19055825b.png');
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 30upx;
	box-sizing: border-box;
	.adrssbox {
		display: flex;
		padding: 30upx;
		border-radius: 10upx;
		background: #fff;
		font-size: 28upx;
		.title {
			width: 100upx;
		}
		.iptbox {
			width: 100%;
		}
		image {
			width: 30upx;
			height: 30upx;
		}
	}
	.submit {
		margin-top: 30upx;
		padding: 26upx;
		background: red;
		border-radius: 60upx;
		text-align: center;
		color: #fff;
	}
}
</style>
